<template>
    <div>
        <div class="pageHeaderSector">
            <div class="pageHeaderSectorTitles">数据看板</div>
            <div class="searchBox">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleForm">
                    <el-form-item label="">
                        <el-input v-model="formInline.planName" placeholder="任务名称"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="formInline.projectId" placeholder="所属项目">
                            <el-option v-for="item in projectData.items" :key="item.id" :label="item.projectName" :value="item.projectId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="formInline.planType" placeholder="任务类型">
                            <el-option label="测试" value="TESTTASK"></el-option>
                            <el-option label="需求" value="DEMANDTASK"></el-option>
                            <el-option label="协办" value="COTASK"></el-option>
                            <el-option label="BUG" value="BUGTASK"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="formInline.planState" placeholder="任务状态">
                            <el-option label="未完成" value="UNFINISHEDTASK"></el-option>
                            <el-option label="已完成" value="FINISHEDTASK"></el-option>
                            <el-option label="逾期" value="OVERDUETASKS"></el-option>
                            <el-option label="临期" value="TEMPORARYTASK"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="inputTimes" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"> </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="sectorBtns">
            <div class="btnItem isActive">我的项目</div>
            <div class="btnItem" @click="lookProject">全部项目</div>
        </div>
        <div class="taskItems" v-if="projectData && projectData.items.length > 0">
            <div class="projectList" v-for="item in projectData.items" :key="item.id" @click="queryTaskData(item)">
                <div class="projectTirle">
                    <div class="projectName">{{ item.projectName }}</div>
                    <div class="projectState projectState1">
                        <span v-if="item.projectState == 'UNFINISHEDTASK'">未完成</span>
                        <span v-if="item.projectState == 'FINISHEDTASK'">已完成</span>
                        <span v-if="item.projectState == 'OVERDUETASKS'">逾期</span>
                        <span v-if="item.projectState == 'TEMPORARYTASK'">临期</span>
                    </div>
                </div>
                <div class="projectContent">
                    <div class="projectContentItem">
                        <span>总任务数</span>
                        <span>{{ item.totalTasks }}</span>
                    </div>
                    <div class="projectContentItem">
                        <span>已完成任务</span>
                        <span>{{ item.finishTasks }}</span>
                    </div>
                    <div class="projectContentItem">
                        <span>逾期任务</span>
                        <span>{{ item.overdueTasks }}</span>
                    </div>
                    <div class="projectContentItem">
                        <span>未完成任务</span>
                        <span>{{ item.outstandingTasks }}</span>
                    </div>
                </div>
            </div>
            <pagination :totalNum="projectData.totalNum" @paginaClick="paginaClick" :pageSize="4"></pagination>
        </div>
        <el-empty v-else :image-size="200"></el-empty>
        <div class="myTask">
            <div class="myTaskTitles">我的任务</div>
            <div class="statisticsBox">
                <div class="statisticsItem">已逾期：{{ statistics.overdueTasks }}</div>
                <div class="statisticsItem">将到期：{{ statistics.temporaryTasks }}</div>
                <div class="statisticsItem">执行中：{{ statistics.outstandingTasks }}</div>
                <div class="statisticsItem">已完成：{{ statistics.finishTasks }}</div>
            </div>
            <div class="maskTable">
                <el-table :data="taskData.items" style="width: 100%" header-row-class-name="elTableStyle">
                    <el-table-column prop="planName" label="任务名称"> </el-table-column>
                    <el-table-column prop="projectName" label="所属项目"> </el-table-column>
                    <el-table-column prop="planType" label="任务类型">
                        <template slot-scope="scope">
                            <span v-if="scope.row.planType == 'TESTTASK'">测试</span>
                            <span v-if="scope.row.planType == 'DEMANDTASK'">需求</span>
                            <span v-if="scope.row.planType == 'COTASK'">协办</span>
                            <span v-if="scope.row.planType == 'BUGTASK'">BUG</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="principal" label="责任人"> </el-table-column>
                    <el-table-column prop="planState" label="状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.planState == 'UNFINISHEDTASK'">未完成</span>
                            <span v-if="scope.row.planState == 'FINISHEDTASK'">已完成</span>
                            <span v-if="scope.row.planState == 'OVERDUETASKS'">逾期</span>
                            <span v-if="scope.row.planState == 'TEMPORARYTASK'">临期</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="releaseDate" label="下达日期"> </el-table-column>
                    <el-table-column prop="expectFinishDate" label="计划完成日期"> </el-table-column>
                    <el-table-column prop="finishTime" label="完成日期"> </el-table-column>
                    <el-table-column prop="delayReason" label="延期原因"> </el-table-column>
                    <el-table-column prop="address" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :totalNum="taskData.totalNum" @paginaClick="paginaClickTable"></pagination>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    data() {
        return {
            formInline: {
                pageNum: 1,
                pageSize: (this as any).$setTing.paging.pageSize,
                userId: '',
                planName: '',
                projectId: '',
                planType: '',
                planState: '',
                startTime: '',
                endTime: ''
            },
            inputTimes: [],
            queryProject: {
                pageNum: 1,
                pageSize: 4,
                userId: ''
            },
            projectData: '',
            taskData: '',
            statistics: ''
        }
    },
    computed: {},
    watch: {
        inputTimes(data: Array<any> | null) {
            if (data != null) {
                ;(this as any).formInline.startTime = data[0]
                ;(this as any).formInline.endTime = data[1]
            } else {
                ;(this as any).formInline.startTime = ''
                ;(this as any).formInline.endTime = ''
            }
        }
    },
    mounted() {
        ;(this as any).getProjectData()
        ;(this as any).getTaskStatus()
        setTimeout(() => {
            if ((this as any).projectData && (this as any).projectData.items.length > 0) {
                ;(this as any).formInline.projectId = (this as any).projectData.items[0].projectId
                ;(this as any).getTaskData()
            }
        }, 500)
    },
    methods: {
        onSubmit() {
            ;(this as any).getTaskData()
        },
        getProjectData() {
            let loginMsg = JSON.parse((sessionStorage as any).getItem('loginMsg'))
            ;(this as any).queryProject.userId = loginMsg.id
            ;(this as any).$request.get('/api/oa/users/findProject', (this as any).queryProject).then((res: any) => {
                if (res.code == 200) {
                    ;(this as any).projectData = res.data
                }
            })
        },
        paginaClick(val: string | number) {
            ;(this as any).queryProject.pageNum = val
            ;(this as any).getProjectData()
        },
        resetForm(formName: string) {
            ;(this as any).$refs[formName].resetFields()
            ;(this as any).formInline.pageNum = 1
            ;(this as any).formInline.planName = ''
            ;(this as any).formInline.projectId = ''
            ;(this as any).formInline.planType = ''
            ;(this as any).formInline.planState = ''
            ;(this as any).formInline.startTime = ''
            ;(this as any).formInline.endTime = ''
            ;(this as any).inputTimes = []
        },
        getTaskData() {
            ;(this as any).$request.postJson('/api/oa/plan/findTasks', (this as any).formInline).then((res: any) => {
                if (res.code == 200) {
                    ;(this as any).taskData = res.data
                }
            })
        },
        getTaskStatus() {
            let loginMsg = JSON.parse((sessionStorage as any).getItem('loginMsg'))
            ;(this as any).$request.get('/api/oa/plan/findMyTaskStatus', { userId: loginMsg.id }).then((res: any) => {
                if (res.code == 200) {
                    ;(this as any).statistics = res.data
                }
            })
        },
        paginaClickTable(val: string | number) {
            ;(this as any).formInline.pageNum = val
            ;(this as any).getTaskData()
        },
        queryTaskData(item: any) {
            ;(this as any).formInline.projectId = item.projectId
            ;(this as any).getTaskData()
        },
        handleClick(row: any) {
            console.log(row)
        },
        lookProject() {
            ;(this as any).$router.push('/project/projectmanage')
        }
    }
}
</script>
<style lang="scss" scoped>
.pageHeaderSector {
    width: 100%;
    background: #ffffff;
    padding: 20px;
    padding-bottom: 5px;
    .pageHeaderSectorTitles {
        width: 100%;
        font-weight: 600;
        border-bottom: 1px solid #e6e8ed;
        padding-bottom: 15px;
    }
    .searchBox {
        margin-top: 20px;
        white-space: nowrap;
        .demo-form-inline {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
.sectorBtns {
    margin-top: 30px;
    white-space: nowrap;
    margin-bottom: 15px;
    .btnItem {
        display: inline-block;
        width: 120px;
        padding: 12px 0;
        border-radius: 3px;
        border: 1px solid #cbcdd5;
        font-size: 12px;
        color: #999999;
        text-align: center;
        margin-right: 15px;
        cursor: pointer;
        background: #ffffff;
        &:hover {
            background: #4064e1;
            color: #ffffff;
            border: 1px solid #4064e1;
        }
    }
    .isActive {
        background: #4064e1;
        color: #ffffff;
        border: 1px solid #4064e1;
    }
}
.taskItems {
    width: 100%;
    .projectList {
        width: 24.2%;
        background: #ffffff;
        padding: 15px 20px;
        margin-left: 1%;
        margin-bottom: 1%;
        display: inline-block;
        &:nth-child(4n + 1) {
            margin-left: 0;
        }
        &:hover {
            box-shadow: 0 0 10px 1px rgb(0 0 0 / 10%);
            cursor: pointer;
        }
        .projectTirle {
            width: 100%;
            border-bottom: 1px solid #e6e8ed;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 15px;
            color: #333;
            .projectName {
                font-weight: 600;
            }
            .projectState1 {
                color: #ff9600;
            }
        }
        .projectContent {
            .projectContentItem {
                display: flex;
                justify-content: space-between;
                align-items: center;
                line-height: 45px;
            }
        }
    }
}
.myTask {
    margin-top: 30px;
    padding: 20px;
    background: #ffffff;
    .myTaskTitles {
        width: 100%;
        font-weight: 600;
        border-bottom: 1px solid #e6e8ed;
        padding-bottom: 15px;
    }
    .statisticsBox {
        width: 100%;
        margin: 20px 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .statisticsItem {
            margin-right: 20px;
            width: 200px;
            padding: 12px 0;
            text-align: center;
            font-size: 12px;
            color: #999999;
            border: 1px solid #cbcdd5;
            border-radius: 3px;
        }
    }
}
</style>
<style>
.maskTable .elTableStyle {
    color: #333333;
}
.maskTable .elTableStyle th {
    background: #f5f5f5;
    text-align: center;
}
.maskTable table tr td .cell {
    text-align: center !important;
}
</style>
